<template>
  <div>
    <el-card style="margin: 0 auto; margin-bottom: 0px">
        <div slot="header" class="Card-Top" style="padding-top: 10px;">
            <span style="display: inline;">编号：{{ userId }} 姓名：{{ Info1?.username }}</span>
            <span class="iconfont icon-ubuntu"></span>
            <el-button size="mini" type="primary" style="float: right;margin-top: 10px;margin-left: 10px;" @click="tuichu()">退出登录</el-button>
            <el-button size="mini" type="primary" style="float: right;margin-top: 10px;" @click="$router.push('/home');">返回</el-button>
        </div>
        <div style="display: flex;justify-content: space-around;">
          <!-- 雷达图START -->
          <div ref="charts" style="width: 50%; height: 400px;"></div>
          <!-- 雷达图END -->
          <!-- 干部特点START -->
          <div style="width: 50%; height: 400px;">
            <h3 style="margin-top: -10px;">干部特点</h3>
            <span :style="{'display':'block','margin-left':+sjmargin()+'px','color':RGBCOLOR(),'font-size':sjs()+'px'}" v-for="(item,index) in tedian" :key=index>{{ item }}</span>
          </div>
          <!-- 干部特点END -->
        </div>
        <!-- 培训学习情况START -->
        <div style="width: 100%; min-height: 400px;margin-top: 10px;">
          <h3 style="margin-top: -10px;">培训学习情况</h3>
            <el-table
              :data="Info2"
              >
              <el-table-column label="起止日期">
                <template #default="scope">
                    {{ scope.row.StartTime}}至{{ scope.row.EndTime}}
                </template>
              </el-table-column>
              <el-table-column prop="Site" label="培训地点">
              </el-table-column>
              <el-table-column label="类型" prop="TrainingType">
              </el-table-column>
            </el-table>
        </div>
        <!-- 培训学习情况END -->
        <!-- 历任岗位&奖励处分情况START -->
        <div style="display: flex;justify-content: space-around;margin-top: 10px;">
          <!-- 历任岗位START -->
          <div style="width: 40%; min-height: 400px;">
            <h3 style="margin-top: -10px;">历任岗位</h3>
            <el-table
              :data="Info3"
              >
              <el-table-column label="在岗日期" prop="TimeO0nDuty">
              </el-table-column>
              <el-table-column prop="JobTitle" label="岗位">
              </el-table-column>
            </el-table>
          </div>
          <!-- 历任岗位END -->
          <!-- 奖励处分情况START -->
          <div style="width: 50%; height: 400px;">
            <h3 style="margin-top: -10px;">奖励处分情况</h3>
            <el-table
              :data="Info3"
              >
              <el-table-column label="奖处日期" prop="SituationLogTime">
              </el-table-column>
              <el-table-column label="奖处内容" prop="SituationLog">
              </el-table-column>
            </el-table>
          </div>
          <!-- 奖励处分情况END -->
        </div>
        <!-- 历任岗位&奖励处分情况END -->
    </el-card>
  </div>
</template>

<script>
// 导入接口
import { getInfo1, getInfo2, getInfo3 } from '@/api/Info'
// 可视化-导入Echarts
import * as echarts from 'echarts'

export default {
  name: 'XiangXiInfo',
  data () {
    return {
      userId: null,
      Info1: null,
      Info2: [],
      Info3: [],
      tedian: null
    }
  },
  created () {
    this.userId = this.$route.params.id
  },
  async mounted () {
    Promise.all([this.getInfo1(), this.getInfo2(), this.getInfo3()])
  },
  watch: {
    Info1 (newVal, oldVal) {
      this.$nextTick(() => {
        this.initCharts()
      })
      console.log('新值', newVal, '旧值', oldVal)
    }
  },
  methods: {
    async getInfo1 () {
      const res = await getInfo1({ id: this.userId })
      this.Info1 = res.data[0]
      this.tedian = JSON.parse(res.data[0].CharacteristicsOfCadres.replace(/'/g, '"'))
      this.tedian = this.shuffle(this.tedian)
    },
    async getInfo2 () {
      const res = await getInfo2({ id: this.userId })
      for (let i = 0; i < res.data.length; i++) {
        this.Info2.push(res.data[i])
        this.Info2[i].StartTime = this.Info2[i].StartTime.substr(0, 10)
        this.Info2[i].EndTime = this.Info2[i].EndTime.substr(0, 10)
      }
    },
    async getInfo3 () {
      const res = await getInfo3({ id: this.userId })
      for (let i = 0; i < res.data.length; i++) {
        this.Info3.push(res.data[i])
        this.Info3[i].TimeO0nDuty = this.Info3[i].TimeO0nDuty.substr(0, 10)
        this.Info3[i].SituationLogTime = this.Info3[i].SituationLogTime.substr(0, 10)
      }
    },
    initCharts () { // Echarts
      const charts = echarts.init(this.$refs.charts)
      const option = {
        title: {
          text: '个人综合得分:' + (this.Info1?.pd + this.Info1?.nl + this.Info1?.qf + this.Info1?.yj + this.Info1?.lj + this.Info1?.xx) / 6
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          y: 'bottom',
          data: ['TA的评价', '平均评价']
        },
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        polar: [
          {
            indicator: [
              {
                text: '品德',
                max: 5,
                min: 0
              },
              {
                text: '能力',
                max: 5,
                min: 0
              },
              {
                text: '勤奋',
                max: 5,
                min: 0
              },
              {
                text: '业绩',
                max: 5,
                min: 0
              },
              {
                text: '廉洁',
                max: 5,
                min: 0
              },
              {
                text: '学习',
                max: 5,
                min: 0
              }
            ],
            center: ['40%', '50%'],
            axisName: {
              fontSize: 15,
              color: '#428BD4'
            }
          }
        ],
        calculable: true,
        series: [
          {
            name: '',
            type: 'radar',
            data: [
              {
                value: [this.Info1?.pd, this.Info1?.nl, this.Info1?.qf, this.Info1?.yj, this.Info1?.lj, this.Info1?.xx],
                name: 'TA的评价'
              }
            ]
          }
        ]
      }
      charts.setOption(option, true)
    },
    sjs () { // 随机文字大小
      const min = 20
      const max = 30
      const randomInt = Math.floor(Math.random() * (max - min + 1)) + min
      return randomInt
    },
    sjmargin () { // 随机边距
      const min = 0
      const max = 250
      const randomInt = Math.floor(Math.random() * (max - min + 1)) + min
      return randomInt
    },
    shuffle (array) { // 随机排列数组
      const res = []; let random
      while (array.length > 0) {
        random = Math.floor(Math.random() * array.length)
        res.push(array[random])
        array.splice(random, 1)
      }
      return res
    },
    RGBCOLOR () { // RGB颜色随机
      const r = Math.floor(Math.random() * 256)
      const g = Math.floor(Math.random() * 256)
      const b = Math.floor(Math.random() * 256)
      if (r > 240 && g > 240 && b > 240) this.RGBCOLOR() // 避免太白看不清
      return `rgb(${r},${g},${b})`
    },
    tuichu () {
      localStorage.removeItem('vuex')
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped  lang='scss'>
::v-deep .el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  width: 1000px;
}

::v-deep .el-tabs__active-bar{
  height: 7px;
  background-color:rgb(150, 60, 0) !important;
  border-radius: 3.5px;
}

::v-deep .el-card__header{
  padding:0px 20px;
}
.Card-Top{
  height: 40px;
}

.Card-Top:after {
  clear: both
}
</style>
